<template>
  <div id="songsingle">
    <!-- @loadSongList  -> 子组件调用父组件的方法 -->
      <SongLits :tracks="songlisttracks" ></SongLits>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="1000">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import SongLits from "../../../../components/playlist/SongLits.vue";
import { getseach } from "../../../../network/songlist";

export default {
  name: "SongSingle",
  data() {
    return {
      songlisttracks: [],
      namepath:'/SeachMusic/SongSingle',
      keywords: this.$route.query.keywords,
      currentPage3:1
    };
  },
  components: {
    SongLits,
  },
  methods: {
    getwachseach() {
      getseach(1,this.$route.query.offset,this.$route.query.keywords).then((res) => {
        this.songlisttracks = res.data.result.songs;
        console.log(res.data);
        });
      //console.log("调用api");
      //判断路由是否为type=1才进行数据请求 解决@BUG2
      /* if (this.$route.query.type == 1) {
        getseach(
          this.$route.query.type,
          this.$route.query.offset,
          this.$route.query.keywords
        ).then((res) => {
          //判断enter为yes  -> 进行数组清空，
          switch (this.$route.query.enter) {
            case (this.$route.query.enter = "yes"):
              this.songlisttracks = res.data.result.songs;
              //enter修改为no时候浏览器地址不会显示改变的值
              this.$route.query.enter = "no";
              break;
            default:
              //ener为no -> 进行合并数组
              this.songlisttracks = this.songlisttracks.concat(
                res.data.result.songs
              );
              //console.log(this.$route.query.enter);
              break;
          }
          //this.songlisttracks = this.songlisttracks.concat(res.data.result.songs)
          //console.log(res.data.result.songs);
        });
      } else {
        console.log("无数据搜索");
      } */
    },
    handleCurrentChange() {
      //重新请求query参数
      this.$router.push({
        path: this.$router.path,
        query: {
          type: 1,
          offset:(this.currentPage3 - 1 ) * 30,
          keywords:this.$route.query.keywords
        }
      }).catch(err => err)
      console.log("歌曲下一页",(this.currentPage3 - 1 ) * 30);
      //let a = this.currentPage
      //进行页数offset跟新请求
      getseach(1,(this.currentPage3 - 1 ) * 30 ,this.$route.query.keywords).then(res => {
        this.songlisttracks = res.data.result.songs;
        //console.log(res.data);
      });
      //给父组件传达置顶信息
      this.$emit('set_scrolltop')
    }
  },
  computed: {

  },
  activated() {
    //console.log(this.songlisttracks == 0);
    console.log();
    if (this.songlisttracks == 0) {
      console.log("歌曲请求了");
      this.getwachseach()
    }
  },
  watch: {
    "$route.query.keywords"(val,oval) {
      //搜索框值变进行数据清空
      this.songlisttracks = 0;
      console.log(val,oval,"歌曲",this.$route.query.keywords,this.$route.path,this.namepath);
      if (this.$route.path == this.namepath) {
        console.log("歌曲触发了API");
        this.currentPage3 = 1
        this.getwachseach()
      }
    }

    //监听keywords来进行调用@getwachseach() 方法
    /* "$route.query.keywords": {
      //immediate:true,
      //deep: true,
      handler(val, oval) {
          console.log("gel----值不一样，进行数据请求",val,oval);
          this.getwachseach();
      },
    }, */
  },
};
</script>

<style>

.block {
  margin:  0 0 0 230px;
}
</style>